<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<h:html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="masterPage.xhtml">
	
	<ui:define name="titulo">
		<h:outputLabel value="Eventos do dia" />
		<input id="pagina" type="hidden" value="eventoDetalhe"/>
	</ui:define>
	
	<ui:define name="centro">
	
		<h:form id="idForm">
	
			<table cellspacing="10" width="100%">
				<tr>
					<td>
						<!-- TABELA ===================================================================== -->
					
					    <p:dataTable id="idTableEvento" var="evento" value="#{eventoDetailMBean.list}" rowkey="#{evento.id}" emptyMessage="Sem eventos" 
					    	selectionMode="single" selection="#{eventoDetailMBean.selected}" style="max-width: 550px; min-width: 550px">
					
							<p:ajax event="rowSelect" update=":idForm:idPanelGroupDetalhe" oncomplete="varDialogDetalhe.show()" />
					
					        <p:column headerText="Hora" style="max-width: 70px; min-width: 70px; overflow: hidden">
					            <h:outputText value="#{evento.hora}" />
					        </p:column>
					        <p:column headerText="Titulo" style="text-align: left; max-width: 410px; min-width: 410px; overflow: hidden">
					            <h:outputText value="#{evento.titulo}" />
					        </p:column>
					        <p:column headerText="Concluido" style="max-width: 70px; min-width: 70px; overflow: hidden">
					            <h:outputText value="#{evento.concluido}">
					            	<f:converter converterId="booleanConverter"/>
					            </h:outputText>
					        </p:column>
					        
					        <f:facet name="footer">  
						        <p:commandButton value="Novo evento" update=":idForm:idPanelGridInsert" oncomplete="varDialogInsert.show()" icon="ui-icon-save"/>
                  				</f:facet>
					    </p:dataTable>
					</td>
					<td>
						<!-- CALENDARIO =============================================================== -->
						
					    <p:calendar value="#{eventoDetailMBean.data}" mode="inline" id="inlineCal" locale="pt">
					        <p:ajax event="dateSelect" listener="#{eventoDetailMBean.handleDateSelect}" 
					        	update=":idForm:growl, :idForm:idTableEvento, :idForm:idPanelGridInsert"/>
					    </p:calendar>
					</td>
				</tr>
			</table>
			
			<!-- MODAL INSERT ======================================================================== -->
			
			<p:dialog header="Criar do Evento" widgetVar="varDialogInsert" modal="true" showEffect="clip" hideEffect="fold" minWidth="600" minHeight="500">
		        <p:panelGrid id="idPanelGridInsert" columns="2" cellpadding="4" style="display:block; text-align:left">
					<f:facet name="header">
						Novo evento
					</f:facet>
					<h:outputText value="Data: " />
					<p:calendar value="#{eventoCadastroMBean.evento.data}" showOn="button" /> 
					<h:outputText value="Hora: " />
					<p:selectOneMenu value="#{eventoCadastroMBean.evento.hora}" effect="fade">
			            <f:selectItem itemLabel="Selecione" itemValue="" />
			            <f:selectItems value="#{eventoCadastroMBean.horas}" var="hora" itemLabel="#{hora}" itemValue="#{hora}"/>
			        </p:selectOneMenu>
					<h:outputText value="Titulo:  " />
					<h:inputText size="50" value="#{eventoCadastroMBean.evento.titulo}"/>
					<h:outputText value="Descricao: " />
					<h:inputTextarea cols="52" rows="5" value="#{eventoCadastroMBean.evento.descricao}"/>
					<h:outputText value="Concluido: " />
					<p:selectBooleanButton value="#{eventoCadastroMBean.evento.concluido}" onLabel="Sim" offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"/>
					<f:facet name="footer">
						<p:commandButton id="cadastrarButton" value="Criar evento" 
							update=":idForm:growl,:idForm:idTableEvento, :idForm:idPanelGridInsert"   
							actionListener="#{eventoCadastroMBean.cadastra}"   
	                    	oncomplete="handleEventoInsertRequest status, args)"/>
					</f:facet>
				</p:panelGrid>
		    </p:dialog>

			<!-- MODAL DETALHE ======================================================================== -->
			
			<h:panelGroup id="idPanelGroupDetalhe">
				<p:dialog header="Detalhes do Evento" id="idDialogDetalhe" widgetVar="varDialogDetalhe" modal="true" showEffect="clip" hideEffect="fold" minWidth="500" >
			        
			        <p:panelGrid id="idPanelGridDetalhe" rendered="#{eventoDetailMBean.selected != null}"
			        	columns="2" cellpadding="4" style="display:block; text-align:left">
						<f:facet name="header">
							Evento
						</f:facet>
						<h:outputText value="Data: " />
						<p:calendar value="#{eventoDetailMBean.selected.data}" showOn="button" /> 
						<h:outputText value="Hora: " />
						<p:selectOneMenu value="#{eventoDetailMBean.selected.hora}" effect="fade">
				            <f:selectItem itemLabel="Selecione" itemValue="" />
				            <f:selectItems value="#{eventoDetailMBean.horas}" var="hora" itemLabel="#{hora}" itemValue="#{hora}"/>
				        </p:selectOneMenu>
						<h:outputText value="Titulo:  " />
						<h:inputText size="50" value="#{eventoDetailMBean.selected.titulo}"/>
						<h:outputText value="Descricao: " />
						<h:inputTextarea cols="52" rows="5" value="#{eventoDetailMBean.selected.descricao}"/>
						<h:outputText value="Concluido: " />
						<p:selectBooleanButton value="#{eventoDetailMBean.selected.concluido}" onLabel="Sim" offLabel="Não" onIcon="ui-icon-check" offIcon="ui-icon-close"/>
			        	<f:facet name="footer">
							<h:panelGroup>
								<p:commandButton id="idButtonAtualizar" value="Atualizar" onIcon="ui-icon-save"
									update=":idForm:growl, :idForm:idTableEvento, :idForm:idPanelGridInsert"   
									actionListener="#{eventoDetailMBean.atualiza}"/>
			                    <p:commandButton id="idButtonRemover" value="Remover" onIcon="ui-icon-delete"
			                    	update=":idForm:growl, :idForm:idTableEvento, :idForm:idPanelGridInsert"   
									actionListener="#{eventoDetailMBean.remove}"   
			                    	oncomplete="handleEventoDeleteRequest(xhr, status, args)"/>
			                </h:panelGroup>
						</f:facet>
			        </p:panelGrid>
			    </p:dialog>
			</h:panelGroup>
			
			<!-- MSGS =============================================================================== -->
			
			<p:growl id="growl" showDetail="true"/>
			
		</h:form>
	</ui:define>
</ui:composition>

</h:html>